<template>
  <div class="flex grow fengkou">
    <div class="flex grow column">
      <Container name="今日风口" color="#FF8A00">
        <div class="flex grow column gridBox" ref="gridBox">
          <div class="paging clear">
            <span class="prev arrow" @click="prev"></span>
            <span class="num">第{{ curnum }}/{{ total }}页</span>
            <span class="next arrow" @click="next"></span>
          </div>
          <div class="flex grow column box">
            <div class="detail" ref="articleDetail">
              <div class="title">{{ detail.articleTitle }}</div>
              <div class="txt" v-html="detail.articleContent"></div>
            </div>
            <div class="list clear flex grow">
              <div
                class="item"
                v-for="item in tableList"
                :key="item.articleId"
                :class="{ cur: item.articleId == detail.articleId }"
                @dblclick="stockDetail(item)"
                @click="toTable(item)"
              >
                <p class="title">
                  {{ item.shortTitle }} <i :class="item.class"></i>
                </p>
                <p class="time">{{ item.createTime }}</p>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </div>
    <openImg v-bind:imgSrc.sync="imgSrc"></openImg>
  </div>
</template>
<script>
import Container from "@/component/Container";
import openImg from "@/component/openImg";
import { imgPath } from "../../script/fn";
import {
  queryArticleStock,
  userClickUpdate,
  queryArticleList,
} from "../../api/api";
import behavior from "@/utils/behavior";

import {
  getUrlParams,
  blockStock,
  isOneMinu,
  stockMarker,
} from "../../script/fn";

import dayjs from "dayjs";
const userData = { ...behavior };
export default {
  data() {
    return {
      imgSrc: "",
      detail: {
        articleId: "",
        articleTitle: "",
        articleContent: "",
      },
      articleList: [],
      tableList: [],
      cur: "",
      curnum: 1,
      total: 0,
      scale: 0,
      firstDay: "",
      lastDay: "",
    };
  },
  components: { Container, openImg },
  mounted() {
    this.queryArticleStock();
  },
  methods: {
    getCodes(stock) {
      return stock
        .map((it) => it.stockCode.match(/\d{6}/)[0])
        .join(",")
        .split(",");
    },
    userClick() {
      const { token } = getUrlParams();
      let openTime = localStorage.getItem("openTime") || 1;
      if (openTime == null) {
        localStorage.setItem("openTime", "1");
      } else {
        localStorage.setItem("openTime", ++openTime);
      }
      userData.user.token = token;
      userData.module.moduleCode = "0006";
      userData.event[0].eventSubject.starttime = Date.now();
      userData.event[0].eventSubject.endtime = "";
      userData.event[0].eventCode = "00029";
      userData.event[0].eventSubject.objectkey = this.cur;
      userData.event[0].eventSubject.extend.openTime = openTime;
      if (!isOneMinu()) return;
      userClickUpdate(userData).then((back) => {
        if (back.status == 1) {
        }
      });
    },
    formatDay(day, reg) {
      return dayjs(day).format(reg);
    },
    queryArticleStock() {
      queryArticleStock({
        productId:
          getUrlParams().productId || localStorage.getItem("productId"),
      }).then((back) => {
        if (back.status == 1) {
          this.ArticleStock = back.data;
          this.queryArticleList();
        }
      });
    },
    //上一页
    prev() {
      if (this.curnum == 1) return;
      this.curnum--;
      this.tableList = this.articleList.slice(
        (this.curnum - 1) * 12,
        this.curnum * 12
      );
    },
    // 下一页
    next() {
      if (this.curnum == this.total) return;
      this.curnum++;
      this.tableList = this.articleList.slice(
        (this.curnum - 1) * 12,
        this.curnum * 12
      );
    },
    // 详情
    stockDetail(item) {
      let stockCode = "";
      if (item.plateStock.length > 0) {
        stockCode = item.plateStock[0].stockCode;
      }
      stockMarker(stockCode, "今日风口", 8);
    },
    showDetail(article) {
      this.$refs.articleDetail.scrollTop = 0;
      this.detail = {
        articleTitle: article.articleTitle,
        articleContent: imgPath(article.articleContent),
        articleId: article.articleId,
      };
    },
    //列表数据
    queryArticleList() {
      const arr = this.ArticleStock.filter(
        (item) => item.articleTypeName == "今日风口"
      );
      queryArticleList({
        limit: 60,
        articleType: arr[0].articleTypeId,
      }).then((data) => {
        if (data.status == 1) {
          if (data.data.length == 0) return;
          this.total = Math.ceil(data.data.length / 12);
          this.articleList = data.data.map((item, index) => {
            item.createTime = item.createTime
              ? dayjs(item.createTime).format("YYYY-MM-DD")
              : "";
            item.shortTitle = item.articleTitle.substring(0, 4);
            item.blockName = item.plateStock[0]?.stockName;
            item.class = {
              icon: index < 3,
            };
            return item;
          });
          this.toTable(this.articleList[0]);
          this.tableList = this.articleList.slice(0, 12);
        }
      });
    },
    toTable(item) {
      this.showDetail(item);
      let block = item.relationStock.map((stock) => ({
        id: stock.id,
        stockCode: stock.stockCode,
        blockCode: stock.blockCode ? stock.blockCode.match(/\d{6}$/g)[0] : "",
        date: item.createTime,
      }));
      let blockCode = "";
      if (item.plateStock.length > 0) {
        blockCode = item.plateStock[0].stockCode;
      }
    //   blockStock({
    //     articleType: item.articleType,
    //     hotspotName: item.articleTitle,
    //     blockCode:blockCode,
    //     stock: JSON.stringify(block),
    //   });
      let stock=JSON.stringify(block)
      window.prompt(
        "",
        `up://["user.info",${Date.now()},{"type":"风口","params":{"articleType":${
          item.articleType
        }},"data":{"hotspotName":"${item.articleTitle}","blockCode":"${blockCode}","stock":${stock}}}]`
      );
    },
    //查看图片
    viewImg(e) {
      if (e.path[0].tagName == "IMG") {
        this.imgSrc = e.path[0].src;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.fengkou {
  padding: 45px 0;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  width: 97%;
  justify-content: center;
}
.gridBox {
  padding: 0px 26px 48px 51px;
  position: relative;
  box-sizing: border-box;
  height: 100%;

  .paging {
    position: absolute;
    right: 27px;
    top: -38px;
    .num {
      font-size: 16px;
      color: #ff8a00;
    }
    .arrow {
      width: 0;
      height: 0;
      position: relative;
      top: 6px;
      border-width: 6px;
      border-style: solid;
      cursor: pointer;
    }
    .prev {
      margin-right: 6px;
      float: left;
      border-color: transparent #35497c transparent transparent;
      &:hover {
        border-color: transparent #1150d2 transparent transparent;
      }
    }
    .next {
      margin-left: 6px;
      float: right;
      border-color: transparent transparent transparent #35497c;
      &:hover {
        border-color: transparent transparent transparent #1150d2;
      }
    }
  }
  .box {
    border: 1px solid #132345;
    .detail {
      height: 50%;
      overflow-y: auto;
      padding: 25px;
      background: #010113;
      border-bottom: 1px solid #132345;
      .title {
        font-size: 24px;
        color: #ff8900;
        line-height: 34px;
        word-break: break-all;
        margin-bottom: 24px;
      }
      .txt {
        line-height: 30px;
        word-break: break-all;
        font-size: 18px;
        color: #3babdb;
      }
    }
    .list {
      height: 50%;
      padding: 10px 15px;
      overflow-y: auto;
      flex-wrap: wrap;
      align-content: flex-start;
      .item {
        width: 170px;
        box-sizing: border-box;
        height: 79px;
        cursor: pointer;
        padding: 12px 18px;
        margin: 5px 15px;
        line-height: 28px;
        background: url($PIC_URL + "/tlbypcWeb/paidService/bg_nor.png")
          no-repeat center;
        background-size: 100% 100%;
        &.cur {
          background: url($PIC_URL + "/tlbypcWeb/paidService/bg_sel.png")
            no-repeat center;
          background-size: 100% 100%;
        }
        .title {
          font-size: 18px;
          height: 28px;
          color: #ff8900;
          .icon {
            display: inline-block;
            width: 42px;
            height: 18px;
            background: url($PIC_URL + "/tlbypcWeb/paidService/lab.png")
              no-repeat center;
            position: relative;
            top: 2px;
          }
        }
        .time {
          height: 28px;
          font-size: 18px;
          color: #35a5dd;
        }
      }
    }
  }
}
.loading {
  justify-content: center;
  align-items: center;
}
.noMore {
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #bcbfc4;
}
</style>
